#all {
    width:980px
}

#main {
    width:860px;
    padding-top:50px
}

h2 {
    text-transform:uppercase;
    font-weight:400;
    background:url(circle-item.png) no-repeat 0 7px;
    text-indent:20px
}

h3 {
    font-weight:400;
    margin:0;
    font-size:24px;
    margin-bottom:14px;
    margin-top:5px
}

.center {
    margin:0 auto
}

.pattern1 {
    background:url(pattern1.jpg)
}

.pattern2 {
    background:url(pattern2.jpg)
}

.pattern3 {
    background:url(pattern3.jpg)
}

.pattern4 {
    background:url(pattern4.jpg)
}

.blue a,.blue h1,.blue h2 {
    color:#1959a0
}

.blue nav .nav-global-li {
    border-left: 1px solid #2870BF;
    border-right: 1px solid #0D3A80;
    float: left;
    height: 69px;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    width: 78px;
}

.blue nav {
    background:#1959a0 url(bg-nav-blue.png)
}

.blue footer #download-vcard {
    background:#1959a0 url(bg-downloadvcard-blue.png) repeat-x
}

.orange a,.orange h1,.orange h2 {
    color:#ef8100
}

.orange nav .nav-global-li {
    float:left;
    margin-top:20px;
    border-right:1px solid #e55400;
    border-left:1px solid #ef8100
}

.orange nav {
    background:#ef8100 url(bg-nav-orange.png)
}

.orange footer #download-vcard {
    background:#ef8100 url(bg-downloadvcard-orange.png) repeat-x
}

.red a,.red h1,.red h2 {
    color:#c70000
}

.red nav .nav-global-li {
    float:left;
    margin-top:20px;
    border-right:1px solid #a90000;
    border-left:1px solid #c70000
}

.red nav {
    background:#c70000 url(bg-nav-red.png)
}

.red footer #download-vcard {
    background:#c70000 url(bg-downloadvcard-red.png) repeat-x
}

.green a,.green h1,.green h2 {
    color:#2cbd00
}

.green nav .nav-global-li {
    float:left;
    margin-top:20px;
    border-right:1px solid #139b00;
    border-left:1px solid #2cbd00
}

.green nav {
    background:#2cbd00 url(bg-nav-green.png)
}

.green footer #download-vcard {
    background:#2cbd00 url(bg-downloadvcard-green.png) repeat-x
}

header {
    height:auto;
    position:relative;
    margin-top: 50px;
}

header #myphoto {
    position:absolute;
    bottom:25px;
    left:28px
}

header #title {
    height:81px;
    padding-left:214px;
    overflow:hidden
}

header #subtitle,header #title h1 {
    float:left
}

header #title h1 {
    margin:12px 20px 0 0;
    padding:0;
    font-size:45px
}

header #subtitle {
    height:22px;
    font-size:20px;
    padding-top:40px;
    padding-left:6px;
    border-left:1px solid #ccc;
    color:#666
}

nav {
    height:106px;
    padding-left:190px;
    overflow:hidden;
    -webkit-border-radius:0 60px 0 0;
    -moz-border-radius:0 60px 0 0;
    -o-border-radius:0 60px 0 0;
    border-radius:0 60px 0 0;
    -webkit-box-shadow:0 0 5px #777;
    -moz-box-shadow:0 0 5px #777;
    -o-box-shadow:0 0 5px #777;
    box-shadow:0 0 5px #777
}

nav .nav-global-li:last-child {
    border-right:none
}

nav .nav-global-li:first-child {
    border-left:none
}

nav .nav-global-a {
    font-size:12px;
    padding:0 5px;
    padding-top:40px;
    display:block;
    color:#FFF;
    text-align:center;
    -webkit-text-shadow:1px 1px 1px #333;
    -moz-text-shadow:1px 1px 1px #333;
    -o-text-shadow:1px 1px 1px #333;
    text-shadow:1px 1px 1px #333
}

nav .nav-home,nav .nav-resume,nav .nav-portfolio,nav .nav-contact {
    background:url(sprite-nav-icons.png) no-repeat
}

nav .nav-home {
    background-position:8px -5px
}

nav .nav-resume {
    background-position:-68px -5px
}

.resume .nav-resume,nav .nav-resume:hover {
    background-position:-68px -80px
}

nav .nav-portfolio {
    background-position:-155px -5px
}

.portfolio .nav-portfolio,.portfoliodetail .nav-portfolio,nav .nav-portfolio:hover {
    background-position:-155px -80px
}

nav .nav-contact {
    background-position:-256px -5px
}

.contact .nav-contact,nav .nav-contact:hover {
    background-position:-256px -80px
}

.home .nav-home a,.resume .nav-resume a,.contact .nav-contact a,.portfolio .nav-portfolio a,.portfoliodetail .nav-portfolio a {
    text-decoration:underline
}

#change-color {
    position:absolute;
    left:0;
    top:10px
}

#change-pattern {
    position:absolute;
    left:0;
    top:150px
}

#change-color,#change-pattern {
    background:#fff;
    padding:8px;
    text-align:center
}

#change-color ul li,#change-pattern ul li {
    height:20px;
    width:20px;
    list-style:none;
    padding:0;
    margin:0;
    margin-bottom:3px
}

#change-color ul li a {
    height:20px;
    display:block;
    text-indent:-999px;
    overflow:hidden
}

#change-pattern ul li a {
    height:20px;
    display:block
}

#change-pattern ul li {
    margin-left:6px
}

#change-color ul li {
    margin-left:1px
}

#change-color ul,#change-pattern ul {
    margin:0;
    padding:0
}

.color-blue {
    background:#1959a0
}

.color-orange {
    background:#ef8100
}

.color-red {
    background:#c70000
}

.color-green {
    background:#2cbd00
}

#content {
    background:#FFF;
    overflow:hidden;
    line-height:25px;
    padding:20px 34px;
    padding-bottom:34px;
    -webkit-border-radius:0 0 0 60px;
    -moz-border-radius:0 0 0 60px;
    -o-border-radius:0 0 0 60px;
    border-radius:0 0 0 60px;
    -webkit-box-shadow:0 0 5px #999;
    -moz-box-shadow:0 0 5px #999;
    -o-box-shadow:0 0 5px #999;
    box-shadow:0 0 5px #999
}

#content p {
    margin:0
}

.table {
    width:50%
}

.table td {
    border:1px solid #FFF;
    padding:2px 8px
}

.table .td-title {
    color:#999;
    width:80px;
    background:#f4f4f4
}

#sec-home p {
    margin:10px 0 25px
}

#all-resume {
    border-bottom:1px solid #eee;
    padding-bottom:20px;
    overflow:hidden
}

#sec-resume ul li,#sec-resume ul {
    list-style:none;
    margin:0;
    padding:0
}

#sec-resume .fl,#sec-resume .fr {
    width:46%
}

#sec-resume ul li span {
    color:#999
}

#sec-resume #education ul li,#sec-resume #testimonials ul li {
    margin-bottom:20px
}

#sec-resume #education span,#sec-resume #employment span {
    background:url(bg-arrow.png) no-repeat 0 4px;
    padding-left:16px
}

#sec-resume #design-skills {
    margin-bottom:40px
}

#sec-resume #employment {
    border-bottom:1px solid #eee;
    margin-bottom:20px;
    padding-bottom:20px
}

#sec-resume #employment h2,#sec-resume #design-skills h2 {
    margin-top:10px
}

#sec-resume #design-skills ul li,#sec-resume #programming-skills ul li {
    margin-bottom:10px
}

#sec-resume #testimonials .aspas {
    font-size:90px;
    padding:23px 10px 0 0
}

#sec-resume #testimonials .aspas,#sec-resume #testimonials img {
    float:left
}

#sec-resume #testimonials p {
    margin-left:100px
}

#sec-resume #testimonials span {
    font-style:italic
}

.stars {
    float:right
}

.star-100,.star-50,.star-0 {
    padding:3px 13px 2px 10px
}

.star-100 {
    background:url(sprite-stars.png) 0 0
}

.star-50 {
    background:url(sprite-stars.png) -27px 0
}

.star-0 {
    background:url(sprite-stars.png) -52px 0
}

#sec-portfolio ul.portfolio-slide li,#sec-portfolio ul.portfolio-slide {
    list-style:none;
    margin:0;
    padding:0
}

#sec-portfolio ul.portfolio-slide li {
    float:left;
    margin-bottom:20px;
    margin-right:8px
}

.marginright-zero {
    margin-right:0!important
}

#sec-portfolio ul.portfolio-slide li figure,.portfoliodetail #content ul.portfolio-slide li figure {
    padding:4px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border:1px solid #ddd
}

#sec-portfolio ul.portfolio-slide li a,.portfoliodetail #content ul.portfolio-slide li a {
    margin-left:5px
}

#sec-portfolio ul.portfolio-slide li figure a,.portfoliodetail #content ul.portfolio-slide li figure a {
    margin-left:0!important
}

#sec-portfolio .portfolio-slide li figure {
    position:relative
}

#sec-portfolio #choose {
    margin-bottom:20px
}

#portfoliodetail-text {
    width:380px
}

#portfoliodetail-text ul li {
    list-style-image:url(bg-arrow.png);
    margin:0;
    padding:0
}

#portfoliodetail-text p {
    margin:10px 0
}

.portfoliodetail .flexslider-detail {
    width:376px
}

.portfoliodetail .button {
    margin-top:20px;
    margin-left:5px
}

.portfoliodetail .link-site {
    background:url(bg-link.png) 0 2px no-repeat;
    padding-left:28px
}

.show-portfolio-text:hover span {
    background:#000 url(portfolio-text-icon.png) no-repeat center
}

.show-portfolio-img:hover span {
    background:#000 url(portfolio-img-icon.png) no-repeat center
}

.show-portfolio-link:hover span {
    background:#000 url(portfolio-link-icon.png) no-repeat center
}

.show-portfolio-link:hover span,.show-portfolio-img:hover span,.show-portfolio-text:hover span {
    opacity:.5;
    -moz-opacity:.5;
    filter:alpha(opacity=5);
    width:180px;
    height:120px;
    position:absolute;
    left:4px;
    top:4px
}

#sec-contact .fl,#sec-contact .fr {
    width:48%
}

#sec-contact span {
    color:#999
}

#sec-contact .contact-info h2,#sec-contact .contact-me h2 {
    margin-top:10px
}

footer {
    margin-bottom:20px
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    #all {
        width:auto
    }

    #main {
        width:770px
    }

    #change-color,#change-pattern {
        display:none
    }

    #header #subtitle {
        width:150px
    }

    #sec-portfolio ul.portfolio-slide li {
        width:24%
    }

    #portfoliodetail-text {
        width:270px
    }
}

@media only screen and (min-width: 479px) and (max-width: 767px) {
    #all {
        width:auto
    }

    #main {
        width:500px;
        padding-top:15px
    }

    header #myphoto {
        left:10px
    }

    header #title {
        height:81px;
        padding-left:185px
    }

    header #subtitle,header #title h1 {
        float:none
    }

    header #title h1 {
        font-size:40px;
        margin:0;
        position:absolute;
        top:-7px;
        left:185px
    }

    header #subtitle {
        padding-top:0;
        padding-left:0;
        position:absolute;
        top:42px;
        left:185px;
        border-left:none
    }

    nav .nav-global-a {
         font-size: 16px;
	    padding: 50px 0 0;
	    position: absolute;
	    text-align: center;
	    width: 100%;
    }


	nav .nav-home {
        background-position:10px -5px
    }

    .home .nav-home.active,nav .nav-home:hover {
        background-position:10px -80px
    }

    nav .nav-resume {
        background-position:-73px -5px
    }

    .resume .nav-resume,nav .nav-resume:hover,nav .nav-resume.active {
        background-position:-73px -80px
    }

    nav .nav-portfolio {
        background-position:-163px -5px
    }

    .portfolio .nav-portfolio,.portfoliodetail .nav-portfolio,nav .nav-portfolio:hover,nav .nav-portfolio.active {
        background-position:-163px -80px
    }

    nav .nav-contact {
        background-position:-263px -5px
    }

    .contact .nav-contact,nav .nav-contact:hover,nav .nav-contact.active {
        background-position:-263px -80px
    }

    #change-color,#change-pattern {
        display:none
    }

    .blue nav,.orange nav,.red nav,.green nav {
        padding-left:174px
    }

    .table {
        float:none;
        width:100%
    }

    #sec-resume .fl,#sec-resume .fr {
        width:100%
    }

    #sec-portfolio ul.portfolio-slide li {
        margin-right:7px
    }

    #portfoliodetail-text {
        width:90%;
        margin:20px auto
    }

    .portfoliodetail-img {
        margin-left:10px
    }

    .portfoliodetail {
        width:395px
    }

    #sec-contact .fl,#sec-contact .fr {
        width:100%
    }

    #sec-contact .contact-me h2 {
        margin-top:40px
    }
}

@media only screen and (max-width: 479px) {
    #all {
        width:auto
    }

    #main {
        width:316px;
        padding-top:15px
    }

    header {
        position:relative;
        height:auto;
        margin-bottom:-120px;
        margin-top:75px
    }

    header #myphoto {
        left:83px!important;
        top:-73px
    }

    header #title {
        height:81px;
        padding-left:185px;
        display:none
    }

    header #subtitle,header #title h1 {
        float:none
    }

    header #title h1 {
        font-size:45px;
        margin:0;
        position:absolute;
        top:250px;
        left:24px;
        width:252px;
        text-align:center
    }

    header #subtitle {
        padding-top:0;
        padding-left:0;
        position:absolute;
        top:310px;
        left:24px;
        width:252px;
        text-align:center;
        border-left:none;
        padding-bottom:20px;
        border-bottom:1px solid #eee
    }

    header #myphoto {
        left:10px
    }

    nav .nav-global-a {
        font-size:16px;
        padding:0;
        position:absolute;
        padding-top:50px;
        text-align:center;
        width:100%;
        bottom:0
    }

    nav .nav-home {
        background-position:13px -5px
    }

    .home .nav-home.active,nav .nav-home:hover {
        background-position:13px -80px
    }

    nav .nav-resume {
        background-position:-68px -5px
    }

    .resume .nav-resume,nav .nav-resume:hover,nav .nav-resume.active {
        background-position:-68px -80px
    }

    nav .nav-portfolio {
        background-position:-163px -5px
    }

    .portfolio .nav-portfolio,.portfoliodetail .nav-portfolio,nav .nav-portfolio:hover,nav .nav-portfolio.active {
        background-position:-163px -80px
    }

    nav .nav-contact {
        background-position:-263px -5px
    }

    .contact .nav-contact,nav .nav-contact:hover,nav .nav-contact.active {
        background-position:-263px -80px
    }

    #change-color,#change-pattern {
        display:none
    }

    .blue nav .nav-global-li,.orange nav .nav-global-li,.red nav .nav-global-li,.green nav .nav-global-li {
        height:68px;
        width:75px;
        margin-top:90px;
        position:relative;
        overflow:hidden
    }

    .blue nav #nav-global-ul,.orange nav #nav-global-ul,.red nav #nav-global-ul,.green nav #nav-global-ul {
        margin-left:5px
    }

    .blue nav,.orange nav,.green nav,.red nav {
        height:160px;
        background-repeat:repeat-x;
        padding-left:0;
        overflow:hidden;
        -webkit-border-radius:0;
        -moz-border-radius:0;
        -o-border-radius:0;
        border-radius:0;
        -webkit-box-shadow:0 0 5px #777;
        -moz-box-shadow:0 0 5px #777;
        -o-box-shadow:0 0 5px #777;
        box-shadow:0 0 5px #777
    }

    #content {
        padding:24px;
        padding-top:130px;
        -webkit-border-radius:0;
        -moz-border-radius:0;
        -o-border-radius:0;
        border-radius:0;
        -webkit-box-shadow:0 0 5px #999;
        -moz-box-shadow:0 0 5px #999;
        -o-box-shadow:0 0 5px #999;
        box-shadow:0 0 5px #999
    }

    .table {
        float:none;
        width:100%
    }

    #sec-resume .fl,#sec-resume .fr {
        width:100%
    }

    #sec-portfolio ul li {
        margin-right:0
    }

    #sec-portfolio ul li a {
        margin-left:0
    }

    #sec-portfolio .slides {
        margin-left:30px
    }

    #portfoliodetail-text {
        width:90%;
        margin:20px auto
    }

    .portfoliodetail .flexslider-detail {
        width:246px
    }

    .portfoliodetail {
        width:255px
    }

    #sec-contact .fl,#sec-contact .fr {
        width:100%
    }

    #sec-contact .contact-me h2 {
        margin-top:40px
    }
}

@media print {
    * {
        background:transparent!important;
        color:#000!important;
        box-shadow:none!important;
        text-shadow:none!important;
        filter:none!important;
        -ms-filter:none!important
    }

    a,a:visited {
        text-decoration:underline
    }

    a[href]:after {
        content:" (" attr(href) ")"
    }

    abbr[title]:after {
        content:" (" attr(title) ")"
    }

    .ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {
        content:""
    }

    pre,blockquote {
        border:1px solid #999;
        page-break-inside:avoid
    }

    thead {
        display:table-header-group
    }

    tr,img {
        page-break-inside:avoid
    }

    img {
        max-width:100%!important
    }

    @page {
        margin:.5cm
    }

    p,h2,h3 {
        orphans:3;
        widows:3
    }

    h2,h3 {
        page-break-after:avoid
    }
}
